<script setup lang="ts">
import { computed, onMounted, reactive, shallowRef } from "vue";
import type { Ref } from "vue";
import { useUserStore } from "@/stores/user.store";
import BasicInfo from "./Components/BasicInfo.vue";
import DeveloperInfo from "./Components/DeveloperInfo.vue";
import UpdatePwdInfo from "./Components/UpdatePwdInfo.vue";
import DevAppList from "../devApp/Components/DevAppList.vue";

const menuData = reactive({
  value: "",
  dataSource: [],
  set() {
    const dataSource:MenuDataProps[] = [
      { label: "基本信息", value: "basicInfo", component: shallowRef(BasicInfo) },
      { label: "修改密码", value: "updatePwdInfo", component: shallowRef(UpdatePwdInfo) }
    ];
    if (useUserStore().isDeveloperSucc) {
      dataSource.push({
        label: "开发者信息",
        value: "developerInfo",
        component: shallowRef(DeveloperInfo)
      });
      dataSource.push({
        label: "我的应用",
        value: "developerAppInfo",
        component: shallowRef(DevAppList),
        props:{
          developerId: useUserStore().userInfo.developerId
        }
      });
    }
    menuData.dataSource = dataSource;
    menuData.value = dataSource[0].value;
  }
});
const currentMenuData = computed(() => {
  return menuData.dataSource.find((menu:MenuDataProps) => menu.value === menuData.value);
});

onMounted(() => {
  // 设置菜单信息
  menuData.set();
});

declare interface MenuDataProps {
  // 菜单名
  label: string;
  // 菜单标识
  value: string;
  // 菜单组件
  component: Ref;
  // 组件属性
  props?: Record<string, any>
}
</script>

<template>
  <div class="flex gap-2 h-full">
    <div class="flex flex-col gap-2 bg-white rounded p-2 w-48 flex-shrink-0">
      <div
        class="p-2 cursor-pointer rounded transition"
        :class="{
          [`x-bg-primary-1 text-white`]: menuData.value === menu.value,
          'x-item': menuData.value !== menu.value
        }"
        @click="menuData.value = menu.value"
        v-for="menu in menuData.dataSource"
        :key="menu.value"
      >
        {{ menu.label }}
      </div>
    </div>
    <div class="flex-1 bg-white rounded p-2">
      <component :is="currentMenuData?.component" v-bind="currentMenuData?.props" />
    </div>
  </div>
</template>

<style scoped lang="less"></style>